<template>
    <div class="login-box">
        <div class="box">
            <div class="bg">
            </div>
            <div class="content">
                <p>
                    华杏医疗生产管理系统
                </p>
                <p>
                    <el-input v-model="query.id" placeholder="请输入用户账号"></el-input>
                </p>
                <p >
                    <el-input v-model="query.password" placeholder="请输入用户密码"></el-input>
                </p>
                <div>
                    <el-checkbox v-model="remember">记住密码</el-checkbox>
                </div>
                <p>
                    <el-button @click="loginEvt" type='primary'>登录</el-button>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import { LOGIN_FLAG } from '@/config/common.conf'
import { deCodeApi, enCodeApi, md5Api } from '../../utils'
import { getMenuListApi, getUserInfoApi, loginApi } from '../../apis/loginApi'
export default {
    data() {
        return {
            query: {
                "id": "",
                "password": ""
            },
            remember: false
        }
    },

    created() {
        let cache = localStorage.getItem('login-info')
        if (!!cache) {
            try {
                cache = deCodeApi(cache).split('----')
                this.query.id = cache[0]
                this.query.password = cache[1]
                this.remember = true
            } catch {
                localStorage.removeItem('login-info')
            }
        }
    },

  methods: {
      async loginEvt() {
          let result = await loginApi({
              ...this.query,
              password: md5Api(this.query.password)
          })
          if (result.code !== 200) {
              this.$message.error('登录失败，原因：' + result.message)
              return
          }

            sessionStorage.setItem(LOGIN_FLAG, enCodeApi(result.token + '----' + Date.now()))
            this.$store.commit('common/setToken', result.token)

            let user = await getUserInfoApi(this.query.id)
            if (user.code === 200) {
                this.$store.commit('common/setUserInfo', user.data)
            }

            let menu = await getMenuListApi()
            if (menu.code === 200) {
                this.$store.commit('common/setMenuList', menu.data.rows)
            }

            // 判断用户是否记住密码，如果记住密码需要缓存密码
            if (this.remember) {
                localStorage.setItem('login-info', enCodeApi(this.query.id + '----' + this.query.password))
            } else {
                localStorage.removeItem('login-info')
            }

            // 这里跳转页面太快，导致我们请求回来的菜单数据，还没有被监听到，并且被做成对应的路由
            setTimeout(() => {
                this.$router.push('/home')
            })
        }
    }
}
</script>

<style lang="less" scoped>
.login-box {
    height: 100%;
    position: relative;

    .box {
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1030px;
        height: 592px;
        margin-left: calc(-1030px / 2);
        margin-top: calc(-592px / 2);

        >.bg {
            display: block;
            position: relative;
            height: 532px;
            box-shadow: 0 0 20px #ccc;
            border-radius: 6px;
            overflow: hidden;
            padding-left: 440px;
            background-color: #ddd;

            &::before {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 440px;
                height: 100%;
                background: url(../../images/login.png) center center / 100% 100% no-repeat;
            }
        }
        .content{
            float: right;
            width: 100%;
            height: 532px;
            padding: 100px 80px 0 80px;
            background: #fff;
            >p{
                text-align: center;
            }
        }
    }
}
</style>